<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>

    <link rel="stylesheet" href="../js/SliderBar5.0/SliderBar5.0.css">
    <script src="../js/SliderBar5.0/SliderBar5.0.js"></script>
    <style>
        html,body{
            padding: 0px;
            margin: 0px;
        }
        .slider a{
         display: block;
         }
    </style>
</head>

<body>
    <div id="sliderOne" class="sliderBar" data-index="0">
        <div class="sliderContainer">
            <ul class="slider">
                <li>
                    <a href="http://www.jnqianle.cn">
                        <img src="../Images/1.jpg" />
                    </a>
                </li>
                <li>
                    <a href="http://www.jnqianle.cn">
                        <img src="../Images/2.jpg" />
                    </a>
                </li>
                <li>
                    <a href="http://www.jnqianle.cn">
                        <img src="../Images/3.jpg" />
                    </a>
                </li>
                <li>
                    <a href="http://www.jnqianle.cn">
                        <img src="../Images/4.jpg" />
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        //*********************5.0  添加无间隙滚动 支持手机版触屏*****************
        var winWidth = $(window).width();
        var height = winWidth / 1366 * 768;
        $('#sliderOne').sliderBar({
            itemWidth: winWidth,
            itemHeight: height,
            maxWidth:800, //设置滚动项最大宽度
            displayCount: 1,
            showBtn: true,
            loopRun: true,
            autoRun: false,
            autoRunTime: 2000,
            markingType: 'circle',
            showType: 'horizontal',
            runType: 'gapless',
            autoSize:true   //指定大小自适应处理
        });
    </script>
</body>

</html>